<template>
	<view>
		<view class="login_top relative">
			<image src="../../static/img/login_bg.png" class="bg w100"></image>
			<view class="absolute w100 flex align-center justify-center" style="height: 100%;top: 0;left: 0;">
				<image :src="conf.web_site_logo" class="logo"></image>
			</view>
		</view>
		<view class="padding-x-60 margin-top-60">
			<view class="relative">
				<text class="fs-40 color-000 relative" style="z-index: 1;">登录</text>
				<image src="../../static/img/login_icon.png" style="width: 36rpx;height: 36rpx;position: absolute;left: 56rpx;top:14rpx"></image>
			</view>
			
			<view class="padding-40 radius10 box_shadow margin-top-40">
				<view class="flex  justify-center margin-bottom-36">
					<view @click="changeType('psd')" class="margin-right-120">
						<view  :class="loginType == 'psd' ?'fs-30  color-zhuse':'fs-28  color-999'">密码</view>
						<image v-if="loginType == 'psd'" src="../../static/img/login_icon4.png" style="margin: 0 auto;display: block;  width: 34rpx;height: 34rpx;"></image>
					</view>
					<view  @click="changeType('code')">
						<view  :class="loginType == 'code' ?'fs-30  color-zhuse':'fs-28  color-999'">验证码</view>
						<image v-if="loginType == 'code'"  src="../../static/img/login_icon4.png" style="margin: 0 auto;display: block; width: 34rpx;height: 34rpx;"></image>
					</view>
				</view>
				
				<view v-if="loginType == 'psd'">
					<view class="flex align-center justify-between margin-bottom-30">
						<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon1.png"></image>
						<input type="text" v-model="info1.mobile" class="fs-28 color-999 flex1 margin-left-20 ipt" placeholder="请输入手机号">
					</view>
					<view class="flex align-center justify-between margin-bottom-30">
						<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon3.png"></image>
						<input type="password" v-model="info1.loginpass" class="fs-28 color-999 flex1 margin-left-20 ipt" placeholder="请输入密码">
					</view>
				</view>
				
				<view v-if="loginType == 'code'">
					<view class="flex align-center justify-between margin-bottom-30">
						<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon1.png"></image>
						<input type="text" v-model="info2.mobile" class="fs-28 color-999 flex1 margin-left-20 ipt" placeholder="请输入手机号">
					</view>
					<view class="flex align-center justify-between margin-bottom-30">
						<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon2.png"></image>
						<view class="flex align-center justify-between  margin-left-20 ipt">
							<input  v-model="code.captcha" type="text" class="fs-28 color-999 flex1" placeholder="请输入图形验证码">
							<image class="login_code_img" :src="src" mode="aspectFill" @tap="init()"></image>
						</view>
					</view>
					<view class="flex align-center justify-between margin-bottom-30">
						<image style="width: 46rpx;height: 46rpx;" src="../../static/img/login_icon2.png"></image>
						<view class="flex align-center justify-between  margin-left-20 ipt">
							<input type="text" v-model="info2.code"  class="fs-28 color-999 flex1" placeholder="请输入验证码">
							<button :disabled="code.status" class="login_code" style="margin-bottom: 4rpx;" @tap="getCode()">{{code.text}}</button>
						</view>
					</view>
				</view>
				<view @click="jump('/pages/public/forgetPsd')" class="text-right fs-26 color-666 margin-top-20">忘记密码?</view>
				
				<view @click="submit()" class="public_btn margin-top-48">登录</view>
				<view @tap="jump('/pages/public/register')" class="text-center fs-26 color-999 margin-top-20">
					<text>还没有账号，</text>
					<text class="color-zhuse">现在注册</text>
				</view>
			</view>
			
		</view>
		
		<view @tap="onTcp" class="fs-24 color-999 margin-y-30 flex align-center justify-center text-center w100" style="bottom: 20rpx;">
			<radio class="tcp-radio brown" :class="{ checked: isTcp }" :checked="isTcp"></radio>
			<view>我已阅读并同意<text @tap.stop="jump('/pages/public/xieyi')" class="color-zhuse">《用户协议》</text>和<text @tap.stop="jump('/pages/public/yinsi')" class="color-zhuse">《隐私政策》</text></view>
		</view>
		
		
		<!-- #ifdef APP-PLUS -->
		<view class="flex align-center justify-center margin-top-60 fs-26 color-666">
			<text>——</text>
			<text class="margin-x-16">第三方账号登录</text>
			<text>——</text>
		</view>
		<view class="flex align-center justify-center margin-top-36">
			<image @click="wxLogin()" src="../../static/img/wx.png" style="width: 100rpx;height: 100rpx;"></image>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:'',
				uuid:'',
				code: {
					text: '获取验证码',
					status: false,
					captcha:'',
				},
				info1:{
					mobile:'',
					loginpass:'',
				},
				info2:{
					mobile:'',
					code:'',
				},
				loginType:'psd',
				conf:{},
				isTcp: false, //协议
			}
		},
		onLoad() {
			this.init();
		},
		methods:{
			onTcp() {
				this.isTcp = !this.isTcp;
			},
			changeType(type){
				this.loginType = type
			},
			init() {
				this.$api.get_img_code().then(res => {
					if (res.code == 1) {
						this.src = res.data.img_src;
						this.uuid = res.data.uuid;
					}
				})
				this.$api.conf().then(res => {
					if (res.code == 1) {
						uni.setStorageSync('conf',JSON.stringify(res.data))
						this.conf = res.data
					}
				})
			},
			getCode(){
				let data = {
					mobile:this.info2.mobile,
					type:'login',
					uuid:this.uuid,
					captcha:this.code.captcha
				}
				let countdown = 60;
				this.code.status = true;
				this.$api.send_sms(data).then(res => {
					this.$msg(res.msg);
					if (res.code == 1) {
						this.code.text = countdown + '秒后重新获取';
						this.code.status = true;
						let timer = setInterval(() => {
							if (countdown > 0) {
								this.code.text = countdown - 1 + '秒后重新获取';
								countdown--;
							} else {
								clearInterval(timer);
								this.code.text = '获取验证码';
								this.code.status = false;
							}
						}, 1000);
					} else {
						this.code.status = false;
					}
				});
			},
			
			submit(){
				if(!this.isTcp){
					this.$msg('请阅读并同意《用户协议》和《隐私政策》');
					return false;
				}
				
				if(this.loginType == 'psd'){
					// 密码登录
					this.$api.login(this.info1).then(res => {
						this.$msg(res.msg);
						if (res.code == 1) {
							uni.setStorageSync("hhToken", res.data.token.access_token);
							setTimeout(() => {
								uni.switchTab({
									url: `/pages/index/index`
								})
							}, 200);
						}
					})
				}else{
					// 短信验证码登录
					this.$api.code_login(this.info2).then(res => {
						this.$msg(res.msg);
						if (res.code == 1) {
							uni.setStorageSync("hhToken", res.data.token.access_token);
							setTimeout(() => {
								uni.switchTab({
									url: `/pages/index/index`
								})
							}, 200);
						}
					})
				}
			},
			
			
			// 第三方微信登录
			wxLogin() {
				var that = this;
				uni.login({
					provider: 'weixin',
					success: function(res) {
						// console.log(res.authResult)
						var openid = res.authResult.openid;
						var unionid;
						if(res.authResult.unionid){
							unionid = res.authResult.unionid;
						}
						uni.getUserInfo({
							provider: 'weixin',
							success(e) {
								var nickname = e.userInfo.nickName;
								var headimgurl = e.userInfo.avatarUrl;
								var data = {openid:openid,unionid:e.userInfo.unionId,nickname:e.userInfo.nickName,headimgurl:e.userInfo.avatarUrl,city:e.userInfo.city,province:e.userInfo.province,country:e.userInfo.country,gender:e.userInfo.gender}
								that.$api.appWxAuth(data).then(res => {
									uni.setStorageSync('hhToken', res.data.token.access_token);
									if (res.code == 1) {
										uni.switchTab({
											url: '/pages/index/index'
										});
									}else if(res.code == 100){
										uni.navigateTo({
											url:'/pages/public/bandPhone'
										})
									}
								});
							}
						});

					}
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.login_top{
		height: 386rpx;
		.bg{
			height: 386rpx;
		}
		.logo{
			width: 148rpx;
			height: 148rpx;
			border-radius: 100%;
		}
	}
	.ipt{
		height: 70rpx;
		border-bottom: 1rpx solid rgba(134, 134, 134, 0.15);
	}
	.public_btn{
		background: linear-gradient(to bottom,#FDA932,#FE951E,#FE8009);
		border-radius: 100rpx;
	}
	/deep/ .uni-checkbox-input{border-radius: 100%;transform: scale(0.76);}
</style>
